<template>
  <div class="gantt-toolbar">
    <div class="left-controls">
      <el-button-group>
        <el-button
          v-for="level in zoomLevels"
          :key="level.value"
          :type="activeZoom === level.value ? 'primary' : ''"
          size="small"
          @click="handleZoom(level.value)"
        >
          <el-icon><component :is="level.icon" /></el-icon>
          <span class="ml-1">{{ level.label }}</span>
        </el-button>
      </el-button-group>

      <el-date-picker
        v-model="_dateRange"
        type="daterange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :shortcuts="dateShortcuts"
        :picker-options="pickerOptions"
        size="small"
        class="ml-3"
        @change="handleDateChange"
      />
    </div>

    <div class="right-controls">
      <el-button size="small" plain @click="handleToday">
        <el-icon><calendar /></el-icon>
        <span class="ml-1">今天</span>
      </el-button>

      <el-button size="small" plain :disabled="!selectedPosts.length" @click="handleFocusSelected">
        <el-icon><aim /></el-icon>
        <span class="ml-1">聚焦</span>
      </el-button>

      <el-dropdown trigger="click" @command="handleCommand">
        <el-button type="primary" size="small" class="ml-2">
          <el-icon><plus /></el-icon>
          <span class="ml-1">新建</span>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="post">
              <el-icon><document-add /></el-icon>
              <span class="ml-1">新建/编辑文章</span>
            </el-dropdown-item>
            <el-dropdown-item command="milestone">
              <el-icon><flag /></el-icon>
              <span class="ml-1">新建里程碑</span>
            </el-dropdown-item>
            <el-dropdown-item command="dependency" :disabled="!selectedPosts">
              <el-icon><connection /></el-icon>
              <span class="ml-1">添加依赖</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import {
  Calendar,
  Plus,
  DocumentAdd,
  Flag,
  Connection,
  Aim as DateIcon,
  Menu as WeekIcon,
  DataBoard as MonthIcon
} from '@element-plus/icons-vue';
import type { BlogPost, PostDependency, PostMilestone, Topic } from '@/components/GanttChart/types';

const props = defineProps({
  selectedPosts: {
    type: Array as () => BlogPost[],
    default: () => []
  },
  dateRange: {
    type: Array,
    default: () => [new Date(), new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)]
  }
});

const emit = defineEmits([
  'zoom',
  'date-change',
  'today',
  'create-post',
  'create-milestone',
  'create-dependency',
  'focus-selected'
]);

const activeZoom = ref('day');
const _dateRange = ref<[Date, Date]>(props.dateRange);

const zoomLevels = [
  {
    value: 'hour',
    label: '时',
    icon: DateIcon
  },
  {
    value: 'day',
    label: '日',
    icon: DateIcon
  },
  {
    value: 'week',
    label: '周',
    icon: WeekIcon
  },
  {
    value: 'month',
    label: '月',
    icon: MonthIcon
  }
];

const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 3);
      end.setDate(end.getDate() + 4);
      return [start, end];
    }
  },
  {
    text: '最近三周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 14);
      end.setDate(end.getDate() + 7);
      return [start, end];
    }
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 15);
      end.setDate(start.getDate() + 15);
      return [start, end];
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 2);
      end.setMonth(end.getMonth() + 1);
      return [start, end];
    }
  },
  {
    text: '最近半年',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 3);
      end.setMonth(end.getMonth() + 3);
      return [start, end];
    }
  },
  {
    text: '最近一年',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 6);
      end.setMonth(end.getMonth() + 6);
      return [start, end];
    }
  },
  {
    text: '最近三年',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setFullYear(start.getFullYear() - 1);
      end.setFullYear(end.getFullYear() + 1);
      return [start, end];
    }
  }
];

const pickerOptions = {
  disabledDate(time: Date) {
    return time.getTime() > Date.now() + 365 * 24 * 60 * 60 * 1000;
  }
};

const handleZoom = (level: string) => {
  activeZoom.value = level;
  emit('zoom', level);
};

const handleDateChange = (range: [Date, Date]) => {
  emit('date-change', {
    start: range[0],
    end: range[1]
  });
};

const handleToday = () => {
  const today = new Date();
  _dateRange.value = [today, new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000)];
  emit('today');
};

const handleCommand = (command: string) => {
  switch (command) {
    case 'post':
      emit('create-post');
      break;
    case 'milestone':
      emit('create-milestone');
      break;
    case 'dependency':
      emit('create-dependency');
      break;
  }
};

const handleFocusSelected = () => {
  if (props.selectedPosts.length) {
    emit('focus-selected', props.selectedPosts[0]);
  }
};
</script>

<style scoped>
.gantt-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background-color: white;
  border-bottom: 1px solid #e5e7eb;
}

.left-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.right-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
</style>
